<template>
  <!-- 歌单列表内容组件 -->
  <div class="cate-list">
    <!-- 插槽 -->
    <slot name="title"></slot>
    <ul class="cate">
      <li
        class="cate-item"
        v-for="(c, idx) in cates"
        :key="idx"
        @click="cateClickHandler(c)"
      >
        <el-tooltip
          class="item"
          effect="dark"
          :content="c.desc"
          placement="top"
        >
          <div class="cate-icon">
            <img :src="c.src" :alt="c.desc" />
          </div>
        </el-tooltip>
        <div class="cate-desc" v-text="c.desc"></div>
      </li>
    </ul>
    <a
      v-show="!fullscreenLoading"
      @click.prevent="moreHandler"
      title="点击加载更多"
      class="more"
      >点击加载更多...</a
    >
  </div>
</template>

<script>
import cateData from "@/data/cate.data";
import { mapMutations, mapState } from "vuex";
export default {
  name: "CateList",
  data() {
    return {
      cates: [],
      fullscreenLoading: false,
    };
  },
  computed: {
    ...mapState("music", ["musicData"]),
  },
  mounted() {
    this.cates = cateData.list;
  },
  methods: {
    ...mapMutations("music", ["TOASTOPERA"]),
    moreHandler() {
      this.fullscreenLoading = true;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.cates = [...this.cates, ...cateData.list];
        loading.close();
        this.$message({
          message: "加载成功！",
          showClose: true,
          type: "success",
        });
      }, 2000);
    },
    cateClickHandler({ desc }) {
      this.TOASTOPERA({
        title: desc,
        toastData: this.musicData,
        toastShow: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cate-list {
  .cate {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .cate-item {
      cursor: pointer;
      &:hover {
        color: #ffcff1;
      }
      &:hover .cate-icon img {
        transform: scale(1.1);
      }
      .cate-icon {
        height: 3.5rem;
        width: 3.5rem;
        border-radius: 0.2rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          transition: all 0.3s;
        }
      }
      .cate-desc {
        width: 3.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0.2rem 0;
        margin-bottom: 0.5rem;
      }
    }
  }
  .more {
    cursor: pointer;
    margin: 0 auto;
    width: 3rem;
    display: block;
    padding-bottom: 0.5rem;
    color: rgb(167, 167, 167);
  }
}
</style>